<template>
  <el-table
    :data="tableData"
    style="width: 100%;"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-table-column
      v-if="showIndex"
      type="index"
      label="序号"
      width="50"
    />
    <template
      v-for="(item, i) in tableCols"
    >
      <el-table-column
        v-if="item.conceal"
        :key="i"
        type="expand"
      >
        <template slot-scope="props">
          <slot name="expand" :data="props.row" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="!item.slot && !item.expand && !item.conceal"
        :key="i"
        :label="item.label"
        :prop="item.prop"
      />
      <el-table-column
        v-if="item.slot"
        :key="i"
        :label="item.label"
      >
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <el-button
              class="el-dropdown-link"
              icon="el-icon-setting"
              size="small"
            >
              {{ item.label }}
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="option in item.options"
                :key="option.key"
                @click.native="getOptions(scope.row, option.key)"
              >{{ option.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column
        v-if="item.expand"
        :key="i"
        :label="item.label"
      >
        <template slot-scope="scope">
          <slot :name="item.prop" :data="scope.row" />
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    tableCols: {
      type: Array,
      default() {
        return []
      }
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    showIndex: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleEdit() {},
    getOptions(row, key) {
      this.$emit('getOptions', row, key)
    }
  }
}
</script>

<style lang="scss">
.el-table th, .el-table__header-wrapper{
  background: #409EFF;
  color: white;
}
</style>
